<script setup lang="ts">
import useStore from '@/store/index'
import {onMounted, reactive} from "vue";
import {AqiDistributionStatisticDto} from "@/ts/entityTypes.ts";
import {getAqiDistributionStatisticsApi} from "@/api/statisticsApi.ts";
import {ElMessage} from "element-plus";

const store = useStore()
store.homeTitle = 'AQI指数分布统计'

let tableData = reactive<Array<AqiDistributionStatisticDto>>([])

const initData = async () => {
  let res = await getAqiDistributionStatisticsApi().catch((err) => {
    ElMessage.error(err)
  })
  if (res?.data.code == 200) {
    tableData.splice(0, tableData.length)
    let aqiNums: Array<number> = res.data.data
    let aqiDescriptions = ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
    for (let i = 0; i < aqiNums.length; i++) {
      tableData.push({
        aqi: i + 1,
        aqiDescription: aqiDescriptions[i],
        aqiNum: aqiNums[i]
      })
    }
    tableData.push()
  } else {
    ElMessage.error(res?.data.msg)
  }
}

onMounted(async () => {
  await initData()
})

</script>

<template>
<div class="main-box">
  <div class="title-box">
    <h4 style="color: white">AQI指数分布统计</h4>
  </div>
  <el-table :data="tableData" style="width: 90%">
    <el-table-column label="AQI指数" prop="aqi"></el-table-column>
    <el-table-column label="AQI指数描述" prop="aqiDescription"></el-table-column>
    <el-table-column label="AQI指数数量" prop="aqiNum"></el-table-column>
  </el-table>
</div>
</template>

<style scoped>
@import "../css/main-components.css";
</style>
